
<template>
    <div>
        <div class="container">
            <div class="icon" >
                <div v-if="!isunfold" @click="stretch" style="color:blueviolet;" >
                    <Icon  type="chevron-down" size="70"></Icon>
                </div>
                <div v-else @click="shrinkage" style="color:red;">
                    <Icon type="chevron-up" size="70"></Icon>
                </div>
            </div>
            <textarea v-html="to_json(content)" :rows="rows" class="content"></textarea>
            <hr>
        </div>
    </div>
</template>
<script>

    export default {
        data(){
            return{
                height:'48px',
                isunfold:false,
                rows:4,
                strArryLength:0
            }
        },
        props:{
            content:{
                required:true,
                type:Object
            }
        },
        components: {},
        methods: {
            to_json(data){
                console.log('30 jsonobj',data);
                let json_str=JSON.stringify(data, null, '\t');
                let strArray = json_str.trim().split('\n');
                this.strArryLength = strArray.length;
                console.log('32 json_str',json_str);
                return json_str;
            },
            stretch(){
                this.rows = this.strArryLength;
                this.isunfold = true;
            },
            shrinkage(){
                this.rows = 4;
                this.isunfold = false;
            },
            zhankai(){
                if(this.isunfold){
                    this.rows = 4;
                    this.isunfold = false;
                }else{
                    this.rows = this.strArryLength;
                    this.isunfold = true;
                }
            }
        }

    };
</script>
<style scoped>
.container{
    position: relative;
}
.icon{
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 20px;
    cursor: pointer;
}
.content{
    overflow: hidden;
    word-wrap:break-word;
    font-size: 16px;
    line-height: 24px;
}
hr{
   margin: 10px 0; 
}
textarea{
    width: 100%;
    resize: none;
    border: none;
    outline: none;
}
</style>